<template>
    <div class="left-bar">
        <div class="title">
            <img src="/icons/icon.png" class="logo">
            <span>校务管理</span>
        </div>
        <el-tabs type="border-card" tab-position="left">
        <el-tab-pane label="User">User</el-tab-pane>
        <el-tab-pane label="Config">Config</el-tab-pane>
        <el-tab-pane label="Role">Role</el-tab-pane>
        <el-tab-pane label="Task">Task</el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts">
    import { defineComponent } from 'vue'

    export default defineComponent({
        name: 'NavBar'
    })
</script>

<style scoped lang="scss">
    .left-bar {
        width: 200px;
        height: 100%;
        background-color: #f5f5f5;
        
        .title{
            width: 100%;
            height: 60px;
            // background-color: red;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .logo{
                width: 40px;
            }
    }
</style>